<template>
  <div class="page">
    <div id="particles-js"></div>
    <div class="container">
      <div class="box">
        <div class="card-effect"></div>
        <div class="header">
          <h2>课程设计管理系统</h2>
          <p>Course Design Management</p>
        </div>

        <div class="form">
          <div class="input-group">
            <div class="input-box">
              <svg-icon icon-class="user" class="icon" />
              <el-input 
                v-model="rulesForm.username"
                placeholder="请输入用户名"
                type="text"
              />
            </div>
          </div>

          <div class="input-group">
            <div class="input-box">
              <svg-icon icon-class="password" class="icon" />
              <el-input
                v-model="rulesForm.password"
                placeholder="请输入密码"
                type="password"
              />
            </div>
          </div>

          <div class="radio-group">
            <el-radio
              v-for="item in menus"
              v-if="item.hasBackLogin=='是'"
              v-bind:key="item.roleName"
              v-model="rulesForm.role"
              :label="item.roleName"
            >{{item.roleName}}</el-radio>
          </div>

          <button class="login-btn" @click="login">
            <span>登录系统</span>
          </button>

          <div class="register">
            <a @click="register('xuesheng')">注册学生账号</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import menu from "@/utils/menu";
import 'particles.js/particles.js';

export default {
  name: 'Login',
  data() {
    return {
      rulesForm: {
        username: "",
        password: "",
        role: "",
      },
      menus: [],
      tableName: "",
    };
  },
  mounted() {
    let menus = menu.list();
    this.menus = menus;
    this.initParticles();
  },
  methods: {
    initParticles() {
      window.particlesJS('particles-js', {
        particles: {
          number: {
            value: 100,
            density: {
              enable: true,
              value_area: 1000
            }
          },
          color: {
            value: '#ffffff'
          },
          shape: {
            type: 'circle'
          },
          opacity: {
            value: 0.6,
            random: false
          },
          size: {
            value: 4,
            random: true
          },
          line_linked: {
            enable: true,
            distance: 180,
            color: '#ffffff',
            opacity: 0.4,
            width: 2
          },
          move: {
            enable: true,
            speed: 2.5,
            direction: 'none',
            random: true,
            straight: false,
            out_mode: 'bounce',
            bounce: true
          }
        },
        interactivity: {
          detect_on: 'canvas',
          events: {
            onhover: {
              enable: true,
              mode: 'repulse'
            },
            onclick: {
              enable: true,
              mode: 'push'
            },
            resize: true
          },
          modes: {
            repulse: {
              distance: 150,
              duration: 0.4
            },
            push: {
              particles_nb: 4
            }
          }
        },
        retina_detect: true
      });
    },
    register(tableName) {
      this.$storage.set("loginTable", tableName);
      this.$router.push({path:'/register'})
    },
    login() {
      if (!this.rulesForm.username) {
        this.$message.error("请输入用户名");
        return;
      }
      if (!this.rulesForm.password) {
        this.$message.error("请输入密码");
        return;
      }
      if (!this.rulesForm.role) {
        this.$message.error("请选择角色");
        return;
      }
      
      let menus = this.menus;
      for (let i = 0; i < menus.length; i++) {
        if (menus[i].roleName == this.rulesForm.role) {
          this.tableName = menus[i].tableName;
        }
      }
      
      this.$http({
        url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
        method: "post"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$storage.set("Token", data.token);
          this.$storage.set("role", this.rulesForm.role);
          this.$storage.set("sessionTable", this.tableName);
          this.$storage.set("adminName", this.rulesForm.username);
          this.$router.replace({ path: "/index/" });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #87CEEB 0%, #00BFFF 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.box {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.1),
    0 6px 6px rgba(0, 0, 0, 0.1),
    0 0 100px rgba(255, 255, 255, 0.1);
  overflow: hidden;

  .card-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2EB67D, #ECB22E, #E01E5B, #36C5F0);
  }

  .header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #2c3e50;
      font-size: 24px;
      font-weight: 600;
      margin: 0 0 8px;
    }

    p {
      color: #94a3b8;
      font-size: 14px;
      margin: 0;
      letter-spacing: 0.5px;
    }
  }

  .form {
    .input-group {
      margin-bottom: 24px;

      .input-box {
        position: relative;

        .icon {
          position: absolute;
          left: 16px;
          top: 50%;
          transform: translateY(-50%);
          color: #94a3b8;
          font-size: 16px;
          z-index: 1;
        }

        .el-input {
          /deep/ .el-input__inner {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            height: 48px;
            border-radius: 12px;
            color: #1e293b;
            font-size: 15px;
            padding: 0 20px 0 44px;
            transition: all 0.3s;
            width: 100%;

            &::placeholder {
              color: #94a3b8;
            }

            &:focus {
              border-color: #2EB67D;
              box-shadow: 0 0 0 4px rgba(46, 182, 125, 0.1);
            }
          }
        }
      }
    }

    .radio-group {
      margin: 32px 0;
      display: flex;
      justify-content: center;
      gap: 24px;

      /deep/ .el-radio {
        margin: 0;

        .el-radio__label {
          color: #64748b;
          font-size: 15px;
          padding-left: 8px;
        }

        .el-radio__inner {
          border-color: #e2e8f0;
          background: #fff;

          &::after {
            background: #2EB67D;
          }
        }

        &.is-checked {
          .el-radio__label {
            color: #2EB67D;
          }
          .el-radio__inner {
            border-color: #2EB67D;
            background: #2EB67D;
          }
        }
      }
    }

    .login-btn {
      width: 100%;
      height: 48px;
      background: #2EB67D;
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &:hover {
        background: #259d6d;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(46, 182, 125, 0.2);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .register {
      margin-top: 24px;
      text-align: center;

      a {
        color: #64748b;
        font-size: 14px;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 8px;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          color: #2EB67D;
          background: rgba(46, 182, 125, 0.1);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .container {
    padding: 16px;
  }

  .box {
    padding: 30px 20px;
  }

  .radio-group {
    flex-direction: column;
    align-items: center;
    gap: 16px !important;
  }
}
</style>
